import React from 'react';

const ScoreBoard = ({ correctAnswers, totalQuestions, currentQuestionIndex, wrongAnswers, userProgress }) => {
  const score = Math.round((correctAnswers / totalQuestions) * 100);
  const progress = ((currentQuestionIndex + 1) / totalQuestions) * 100;

  return (
    <div className="card" style={{ backgroundColor: '#f8f9fa' }}>
      <h3 style={{ textAlign: 'center', marginBottom: '20px' }}>学习进度</h3>
      
      <div className="score">
        当前得分：{correctAnswers} / {totalQuestions} ({score}%)
      </div>
      
      <div className="progress-bar">
        <div 
          className="progress-fill" 
          style={{ width: `${progress}%` }}
        ></div>
      </div>
      
      <div style={{ textAlign: 'center', marginTop: '10px' }}>
        第 {currentQuestionIndex + 1} 题 / 共 {totalQuestions} 题
      </div>

      {/* 用户进度统计 */}
      {userProgress && (
        <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#fff', borderRadius: '8px' }}>
          <h4 style={{ marginBottom: '10px', color: '#333' }}>学习统计</h4>
          <div style={{ fontSize: '14px', lineHeight: '1.6' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '5px' }}>
              <span>已掌握：</span>
              <span style={{ color: '#28a745', fontWeight: 'bold' }}>{userProgress.correct.length} 题</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '5px' }}>
              <span>需复习：</span>
              <span style={{ color: '#ffc107', fontWeight: 'bold' }}>{userProgress.completed.length} 题</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '5px' }}>
              <span>错误：</span>
              <span style={{ color: '#dc3545', fontWeight: 'bold' }}>{userProgress.wrong.length} 题</span>
            </div>
            <hr style={{ margin: '10px 0', border: 'none', borderTop: '1px solid #e1e5e9' }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 'bold' }}>
              <span>总计：</span>
              <span style={{ color: '#667eea' }}>{userProgress.correct.length + userProgress.completed.length + userProgress.wrong.length} 题</span>
            </div>
          </div>
        </div>
      )}
      
      {wrongAnswers.length > 0 && (
        <div style={{ marginTop: '20px' }}>
          <h4>本次错题 ({wrongAnswers.length} 题)</h4>
          <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
            {wrongAnswers.map((wrong, index) => (
              <div key={index} style={{ 
                padding: '10px', 
                margin: '5px 0', 
                backgroundColor: '#fff', 
                borderRadius: '5px',
                border: '1px solid #e1e5e9'
              }}>
                <div><strong>题目：</strong>{wrong.question}</div>
                <div><strong>你的答案：</strong>{wrong.userAnswer}</div>
                <div><strong>正确答案：</strong>{wrong.correctAnswer}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default ScoreBoard; 